<template>

  <!-- 自动监测 -->

  <div class="board_page">
    <!-- 左边 -->
    <dv-border-box-13
      style="height: 84vh"
      class="left fade_animition_left"
      :class="isControl?'left_project':''"
      :color="['#3A506A', '#3BD5FD']"
      backgroundColor="rgba(23, 36, 63, 0.8)">
      <dv-decoration-1 class="board_page-right-d"/>
      <h6 class="l_title-s">监测统计</h6>
      <div class="card-num-box">
        <p class="title3"> {{dataCount.name}}</p>
        <number-scroll :number="dataCount.count ? dataCount.count : 0"></number-scroll>
      </div>
      <div style="display: flex;align-items: center;justify-content: space-between;width: 100%">
        <div class='left-li common_card-bk ' v-for="item in monitor || []" :key="item.name">
          <div class='left-li-top'>
            <p class='left-li-top-title'>
              <img v-if="item.name === '工点'" src='../imgs/gongdian.png'>
              <img v-if="item.name === '监测点'" src='../imgs/jiancedian.png'>
              {{item.name}}
            </p>
            <p class='float-right left-li-title-right' style="margin-top:1rem">
              <span class='num1 color2'>
                <number-change :number="item.value" style="font-size: 1rem;"></number-change>
              </span> 个
            </p>
          </div>
        </div>
      </div>

      <div style="display: flex;align-items: center;justify-content: space-between;width: 100%">
        <div class='left-li common_card-bk ' v-for="item in monitorType || []" :key="item.name">
          <div class='left-li-top'>
            <p class='left-li-top-title'>
              <img v-if="item.name === '人工监测点'"  src='../imgs/rengong.png'>
              <img v-if="item.name === '自动监测点'"  src='../imgs/auto.png'>
              {{item.name}}
            </p>
            <p class='float-right left-li-title-right' style="margin-top:1rem">
              <span class='num1 color2'>
                <number-change :number="item.value" style="font-size: 0.8rem;"></number-change>
              </span> 个
            </p>
          </div>
        </div>

      </div>
      <div style="display: flex;align-items: center;justify-content: space-between;width: 100%">
        <div class='left-li common_card-bk ' style="width: 33%" v-for="item in equipStatus || []" :key="item.name">
          <div class='left-li-top '>
            <p class='left-li-top-title'>
              <img v-if="item.name === '在线'" src='../imgs/zaixian.png'  style="width: 30%">
              <img v-if="item.name === '离线'" src='../imgs/lx.png'  style="width: 30%">
              <img v-if="item.name === '无设备'" src='../imgs/manglu.png'  style="width: 30%">
              <span class='num1 color2' style="margin-left: 10px">
                <number-change :number="item.value" style="font-size: 1rem"></number-change>
              </span>
            </p>
            <p class='float-right left-li-title-right' style="margin-top:1rem;color: #0beaeb;">
              {{item.name}}
            </p>
          </div>
        </div>

      </div>
      <h6 class="l_title-s">监测类型占比统计</h6>
      <div ref="chart_3" class="chart_3"></div>
    </dv-border-box-13>
    <!-- 中间-->
    <dv-border-box-8
      v-if="isControl"
      style="height: 25vh"
      class="bottom_center fade_animition_center"
      :color="['#3A506A', '#3BD5FD']"
      backgroundColor="rgba(23, 36, 63, 0.8)">
      <h6 class="l_title-s">项目信息</h6>
      <div class="s-detail">
        <ul>
          <li>项目名称：<span>{{projectDetail.name}}</span></li>
        </ul>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-row>
              <el-col :span="15">
                <ul>
                  <li>所属行政区：<span>{{projectDetail.area?projectDetail.area:'---'}}</span></li>
                  <li>位置信息：<span>{{projectDetail.position?projectDetail.position:'---'}}</span></li>
                </ul>
              </el-col>
              <el-col :span="9">
                <ul>
                  <li>所属行业：<span>{{projectDetail.industryName?projectDetail.industryName:'---'}}</span></li>
                  <li>工程阶段：<span>{{projectDetail.stageName?projectDetail.stageName:'---'}}</span></li>
                </ul>
                <!-- 项目图片-->
              </el-col>
            </el-row>
            <!-- 项目概况-->
            <div v-if="projectDetail.survey" class="project_survey">{{projectDetail.survey}}</div>
            <div v-else class="project_survey">暂无项目简介</div>
          </el-col>
<!--          <el-col :span="8" style="margin-top:10px">-->
<!--            <el-carousel trigger="click" height="150px;">-->
<!--              <el-carousel-item v-for="(item,index) in projectDetail.projectInfoImgList" :key="index">-->
<!--                <el-image style="height:140px;width:100%"-->
<!--                          @click.stop="previewImg(index,projectDetail.projectInfoImgList)"-->
<!--                          :src="constUrl+item" fit="cover"></el-image>-->
<!--              </el-carousel-item>-->
<!--            </el-carousel>-->
<!--          </el-col>-->
        </el-row>
      </div>
    </dv-border-box-8>
    <!-- 右边 -->
    <dv-border-box-13
      class="right fade_animition_right"
      :color="['#3A506A', '#3BD5FD']"
      style="width: 30%;top: 13%;right: 1%;height: 79vh"
      backgroundColor="rgba(23, 36, 63, 0.8)">
      <dv-decoration-12 class="board_page-right-d" style="width:350px;height:50px;"/>
      <h6 class="l_title-s">最新监测数据</h6>
      <dv-scroll-board :config="rightTableConfig" @click="click" class="dv_table_right"/>
      <h6 class="l_title-s" style="margin: 1vh;">预警等级<span
        style="font-size: 50%;margin-left: 1vw;color: rgba(255,255,255,0.5)">可点击查看</span></h6>
      <div style="width: 100%;height: 30vh">
        <el-card
          @click.native="seeMap(item.warningLevel)"
          class="grade-card card-concent"
          shadow="always"
          v-for="item in countWarn"
          :key="item.warningLevel"
          style="margin: 1vh;color: white;;cursor:pointer;"
          :style="item.warningLevel | gradeColor">
          <div style="background-color: rgb(125,125,125,0.2);;height: 48px;line-height: 48px;padding-left: 10px;width: 25%">
            <i class="el-icon-s-operation"> </i>
            <i class="grade-word">{{ item.warningLevelName }}</i>
          </div>
          <div class="grade-box">
            <p style="padding-left: 10px">
              <span>数量：</span><span>{{ item.num }}，</span>
              <span>占比：</span><span>{{ item.percent }}%</span>
            </p>
            <el-progress
              color="#ffffff"
              :stroke-width="3"
              :show-text="false"
              class="s-progress"
              :percentage="item.percent"></el-progress>
          </div>
        </el-card>
      </div>
    </dv-border-box-13>
    <picture-viewer ref="imageViewer"></picture-viewer>
  </div>
</template>

<script>
import {
  countWarnList,
} from '@/services/model/project-info.js'
import {monitorTypeCount, queryRecentList} from '@/services/model/monitor-board'
import Format from '@/utils/format'
import NumberScroll from '../components/number-scroll'
import NumberChange from "../components/number-change";
import {store} from "../../../monitor/work-point.store";
import PictureViewer from '@/components/picture-viewer'
import constUrl from '@/services/env'

const Echarts = require('echarts')

export default {
  components: {NumberScroll, NumberChange, PictureViewer},
  data() {
    return {
      constUrl,
      countWarn: [],
      charts: null,
      // 右边列表
      rightTableList: [],
      equipStatus: [],
      monitorType: [],
      dataCount: {},
      monitor: {},
    }
  }, filters: {
    // 时间格式化
    formatTimer(timer) {
      return Format(new Date(timer));
    },
    // 预警等级颜色
    gradeColor(val) {
      switch (val) {
        case 1:
          return "background-color:#0DC26B !important";
        case 2:
          return "background-color:#0073b7 !important";
        case 3:
          return "background-color:#f39c12 !important";
        case 4:
          return "background-color:#ff851b !important";
        case 5:
          return "background-color:#e43321 !important";
        default:
          return "background-color:#0DC26B !important";
      }
    },
  },

  computed: {
    isControl() {
      if (this.$route.params.projectId) {
        return true
      }
      return false
    },
    projectDetail() {
      return store.projectInfo
    },
    rightTableConfig() {
      return {
        header: ['', '监测类型', '时间', '测点名称', '数据'],
        data: this.rightTableList.map(x => [
          x,
          x.monitorTypeName,
          x.createTime ? Format(new Date(x.createTime), 'yyyy-MM-dd') : '',
          `<p class="davav_p" title="${x.pointName}">${x.pointName}</p>`,
          x.recordValueName,
          '查看',
        ]),
        headerBGC: '#22314B',
        oddRowBGC: '#162036',
        evenRowBGC: '#222B40',
        rowNum: 5,
        headerHeight: 40,
        //第一个值用作跳转使用，把padding样式去掉，就不展示；最后一个作为查看按钮
        columnWidth: ['0px;padding:0', 140, 180, 200, 220, '100px;color: #1990FE;cursor: pointer;'],
      }
    }
  },
  methods: {
    // 查看大图
    previewImg(index, urls) {
      this.$refs.imageViewer.showViewer(urls.map(x => this.constUrl + x), index)
    },
    // 预警等级修改地图
    seeMap(index) {
      this.$emit('getShopCode', index)
    },
    // 预警等级占比
    async warnCountList(projectId) {
      let res = await countWarnList({projectId});
      let countWarn = res.data ? res.data : [];
      let warnAllCount = countWarn.reduce(
        (acc, current) => acc + parseInt(current.num),
        0
      );
      if (warnAllCount === 0) {
        this.countWarn = countWarn.map((item) => {
          return {
            ...item,
            percent: 0,
          }; // 占比
        });
      } else {
        this.countWarn = countWarn.map((item) => {
          return {
            ...item,
            percent: parseInt((item.num / warnAllCount) * 100),
          }; // 占比
        });
      }
    },
    click(data) {
      let row = data.row[0]
      this.$router.push({
        path: `/project/${row.projectId}/work-point/${row.workPointId}/monitor/${row.monitorType}?activeId=${row.pointId}`,
      });
    },
    // 隐患排查-最近数据轮播(TOP20)
    async queryRightList(projectId) {
      const {data} = await queryRecentList({projectId})
      this.rightTableList = data || []
    },
    // 左边的echarts
    async queryLeftChart(projectId) {
      const {data} = await monitorTypeCount({projectId})
      const list = data?.typeCount.map(x => ({name: x.name, value: x.value})) || []
      this.dataCount = {
        img: require('../imgs/list_icon_0.png'),
        name: '监测数据总量',
        count: data.mainCount.find(x => x.name === '监测数据总量').value || 0,
        color: 'color3'
      }
      this.equipStatus = data.mainCount.filter(x =>
        x.name === '在线' || x.name === '离线'|| x.name === '无设备'
      )
      this.monitor = data.mainCount.filter(x =>
        x.name === "工点" || x.name === '监测点'
      )
      this.monitorType = data.mainCount.filter(x =>
        x.name === "自动监测点" || x.name === '人工监测点'
      )
      this.dispatchAction1 = ''
      this.dispatchAction2 = ''
      this.updateChart(list)
    },
    // 初始化echarts
    initChart() {
      this.charts = Echarts.init(this.$refs.chart_3, null, {
        locale: 'ZH'
      })

    },
    // 渲染数据
    updateChart(data) {
      this.charts.clear()
      const option = {
        tooltip: {
          trigger: 'item'
        },
        color: [
          '#80FABA',
          '#2BF8E3',
          '#3BD5FD',
          '#266BFF',
          '#5E52F9',
          '#80FABA',
          '#2BF8E3',
          '#2BF8E3'
        ],
        legend: {
          top: '3%',
          left: 'left',
          textStyle: {
            color: '#ffffff'
          },
          formatter: (name) => {
            let item = data.find(x => x.name === name)
            return name + ' ' + item.value
          },
        },
        series: [
          {
            name: '监测类型',
            type: 'pie',
            radius: ['40%', '65%'],
            avoidLabelOverlap: false,
            top: 60,
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data
          }
        ]
      }
      this.dispatchAction1 = 'highlight'
      this.dispatchAction2 = 'showTip'
      this.charts.setOption(option)
      let currentIndex = 0
      setInterval(() => {
        var dataLen = option.series[0].data.length;
        // 取消之前高亮的图形
        this.charts.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: currentIndex
        });
        currentIndex = (currentIndex + 1) % dataLen;
        // 高亮当前图形
        this.charts.dispatchAction({
          type: this.dispatchAction1,
          seriesIndex: 0,
          dataIndex: currentIndex
        });
        // 显示 tooltip
        this.charts.dispatchAction({
          type: this.dispatchAction2,
          seriesIndex: 0,
          dataIndex: currentIndex
        });
      }, 2000);
    },
    // 路线改变
    refresh(projectId) {
      this.queryLeftChart(projectId)
      this.queryRightList(projectId)
      this.warnCountList(projectId)
    },
  },
  mounted() {
    this.initChart()
    window.onresize = () => {
      this.charts.resize()
    }
  },
  activated() {

  }
}
</script>

<style lang="less" scoped>
  @import url('./common.less');
</style>

<style lang="less" scoped>
  .left_project {
    width: 25.5rem !important; /* 392/16 */;
  }

  .dv_table_right {
    margin-top: 1.5rem /* 24/16 */;
    width: 100%;
    height: 30vh;
    overflow: hidden;
  }

  .assess_total {
    margin-top: 1.5rem /* 24/16 */;
    display: flex;
    flex-wrap: wrap;

    .assess_total-item {
      margin-right: 1.5rem /* 24/16 */;
      margin-bottom: 1rem /* 16/16 */;
      flex-grow: 1;

      button {
        width: 100%;
      }
    }
  }

  .chart_3 {
    width: 90%;
    height: 35vh;
  }

  .left-li {
    position: relative;
    margin: 0.5rem;
    width: 50%;
    background: linear-gradient(92.75deg, rgba(58, 69, 90, 0.3612) 0.33%, rgba(21, 30, 49, 0.387) 100.73%);
  }

  .left .left-li:hover {
    cursor: pointer;
  }

  .left-li-top::after {
    display: block;
    content: " ";
    clear: both;
  }

  .left .left-li .left-li-top-title {
    float: left;
    color: #D5E3E8;
    font-size: 0.8rem;
  }

  .left .left-li .left-li-title-right {
    float: right;
    font-size: 0.8rem;
    color: #939EA3;
  }

  .left-li-bottom {
    position: relative;
    border-top: 1px solid #3A506A;
    display: flex;
    justify-content: space-around;
    margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
    font-size: 0.75rem;
    color: #939EA3;
    margin-top: 2%;
    padding-top: 2%;
    line-height: 4;
  }

  .left-li-bottom::before, .left-li-bottom::after {
    content: " ";
    display: inline-block;
    width: 0.3rem;
    height: 0.3rem;
    background: #3A506A;
    position: absolute;
    top: -0.15rem;
    z-index: 2;
  }

  .left-li-bottom::before {
    left: 0;
  }

  .left-li-bottom::after {
    right: 0;
  }

  .left .left-li .left-li-top-title img {
    width: 2.0rem;
    vertical-align: bottom;
  }

  .card-num-box {
    text-align: center;

    .title3 {
      font-size: 1.125rem;
      line-height: 1.5;
      color: #D5E3E8;
    }
  }

  .grade-card {
    color: #ffffff;
    margin-bottom: 8px;
    font-size: 13px;
    /*height: 6vh;*/

    /deep/ .el-card__body {
      padding: 0px;
      display: flex;
      align-items: center;
    }

    /deep/ .el-card__body i,
    .el-card__body .grade-box {
      display: inline-block;
      vertical-align: middle;
    }

    .grade-box {
      display: inline-block;
      padding: 10px 0;
      width: 75%;

      p {
        margin-bottom: 1vh;

      }
    }

    /deep/ .s-progress {
      display: block;
      width: 100%;

      .el-progress-bar__outer {
        background-color: #9a9a9a;
        width: 100%;
      }
    }

    .grade-word {
      font-size: 14px !important;
      width: 65px;
    }

    i {
      padding-right: 7px;
      font-size: 26px !important;
    }
  }


  .equipmentBox {
    width: 50%;
    /*display: inline-block;*/
  }

  .s-detail ul li {
    padding: 7px;
    border-bottom: 1px solid #ebeef5;
    font-weight: bold;
    font-size: 10px;
    color: #82a8f2;
  }

  .s-detail ul li span {
    font-weight: normal;
    color: #ffffff;
  }

  .project_survey {
    overflow: auto;
    word-wrap: break-word;
    color: #ffffff;
    font-size: 13px;
    line-height: 20px;
    text-indent: 20px;
    height: 10vh;
  }

  ::-webkit-scrollbar {
    width: 5px;
    height: 10px;
  }
  ::-webkit-scrollbar-thumb {
    background-color: #8c939d;
    border-radius: 10px;
  }
</style>

